<script lang="ts" setup>
import { ElButton, ElTableColumn, ElTable, ElLink, ElTabs, ElTabPane, ElInput, ElSelect, ElOption, ElMessage, } from 'element-plus';
import type { TabsPaneContext } from 'element-plus'
import { ElMessageBox, ElDialog } from 'element-plus'
import { Search, Delete, Bottom, Top } from '@element-plus/icons-vue'
import Limit from '@/views/content/util/limit.vue'
import Header from '@/views/content/util/header.vue'
import ProductDetails from '@/views/content/components/product/inProduct/productDetails.vue'
import { onMounted, ref, markRaw } from 'vue'
import {
  productListApi, productCountNumberApi, delProductApi, recoverProductApi, specificationByProductIdListApi, updateSpecificationByProductIdListApi,
  updateProductApi, classify1ListNameApi, updateBatchProductApi
} from '@/apis/productApi'
import { useUserStore } from '@/stores/user'
import { res } from '@/pojo/dto/res'
import IButton from "@/views/content/util/button/iButton.vue"
import OButton from "@/views/content/util/button/oButton.vue"



//显示加载状态
const loadingItemList = ref(false)
const userStore = useUserStore()
//商品信息展示接口
// interface ProductVo {
//   sort: string
//   productId: string
//   name: string
//   classify1Name: string
//   price: number
//   number: string
//   multiSpec: String
//   maxPrice:number
//   minPrice:number
// }
//------------------------------------------------------------------------------分类功能------------------------------------------------------------------------------------
//分类查询
const activeName = ref('all')
//商品列表
const itemList = ref([])
//统计数量
interface ProductCount {
  all: number
  up: number
  under: number
  issuffice: number
  sellout: number
  delete: number
}
const productCount = ref<ProductCount>({
  all: 0,
  up: 0,
  under: 0,
  issuffice: 0,
  sellout: 0,
  delete: 0
})
const classify1ListName = ref([])

//根据商品状态查询商品
const getProductListByCondition = async (condition: String) => {
  loadingItemList.value = true
  const res: res = await productListApi(condition)
  if (res.code == 0) {
    itemList.value = res.data
    console.log(itemList.value)
    loadingItemList.value = false
  }
}
//商品不同状态统计
const getProductListCount = async () => {
  const res = await productCountNumberApi()
  productCount.value.all = res.data.all_product_number
  productCount.value.up = res.data.up_product_number
  productCount.value.under = res.data.under_product_number
  productCount.value.issuffice = res.data.issuffice_product_number
  productCount.value.sellout = res.data.sellout_product_number
  productCount.value.delete = res.data.del_product_number
}

const fenlei = async (tab: TabsPaneContext) => {
  // console.log(tab.props.name)
  if (tab.props.name === 'all') {
    await getProductListByCondition('all')
  }
  if (tab.props.name === 'up') {
    await getProductListByCondition('up')
  }
  if (tab.props.name === 'under') {
    await getProductListByCondition('under')
  }
  if (tab.props.name === 'issuffice') {
    await getProductListByCondition('issuffice')
  }
  if (tab.props.name === 'sellout') {
    await getProductListByCondition('sellout')
  }
  if (tab.props.name === 'delete') {
    await getProductListByCondition('delete')
  }

}
//-------------------------------------------------------------------------------搜索功能-----------------------------------------------------------------------------------
//搜索
const input_sousuo_name = ref('')//搜索框输入内容-按名称搜索
const input_sousuo_class = ref('全部分类')//搜索框输入内容-按分类搜索
const select = ref('1')//选中的项value
//防抖
function debounce(func, delay) {
  let timerId;

  return function () {
    const context = this;
    const args = arguments;

    clearTimeout(timerId);

    timerId = setTimeout(() => {
      func.apply(context, args);
    }, delay);
  };
}


//按分类搜索功能
const selectHandle = async (content: string) => {
  input_sousuo_name.value = ''
  if (input_sousuo_class.value == '全部分类') {
    await getProductListByCondition('all')
    return
  }
  await getProductListByCondition(activeName.value)
  const matchedItems = itemList.value.filter(item => item.classify1Name.includes(content));
  limitItemList.value = matchedItems
}

//分类搜索回显分类名
const getClassNames = async () => {
  const res = await classify1ListNameApi()
  classify1ListName.value = res.data
}

//搜索框输入
const debouncedInputHandle = debounce(async (value) => {
  input_sousuo_class.value = '全部'
  await getProductListByCondition('all')
  console.log('输入内容：' + value)

  if (value != '') {
    const matchedItems = itemList.value.filter(item => item.name.includes(value))
    limitItemList.value = matchedItems
    return
  }
  if (value == '') {
    console.log('空！！！')
    await getProductListByCondition(activeName.value)
  }
}, 500) // 设置防抖延迟时间

//-------------------------------------------------------------------------------商品分页------------------------------------------------------------------

const limitItemList = ref([])
const getLimitItemList = (displayedItemList: Array<Object>) => {
  // console.log("接收：")
  // console.log(displayedItemList)
  limitItemList.value = displayedItemList
}
//-------------------------------------------------------------------------------商品选中批量处理------------------------------------------------------------------
const selectProductIdList = ref([])//选中商品信息列表
// 处理选中
const handleSelectionChange = (selectProductList: Array<any>) => {
  console.log('选中行数据：')
  console.log(selectProductIdList.value)
  selectProductIdList.value = []
  selectProductList.forEach(item => {
    selectProductIdList.value.push(item.productId)
  })
  console.log(selectProductIdList.value)
}
//批量处理
const batchHandle = async (productIdList, status, number, isExist) => {

  if (selectProductIdList.value.length == 0) {
    ElMessage({ type: 'info', message: '未选中任何商品！' })
    return
  }

  //批量修改自定义库存
  if (number === -1) {
    ElMessageBox.prompt('', '批量修改库存', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      draggable: true,
      inputPlaceholder: '请输入库存',
      inputPattern:
        /^(0|[1-9]\d*)$/,
      inputErrorMessage: '请输入数字',
    })
      .then(async ({ value }) => {
        number = value
        const res: res = await updateBatchProductApi({ productIdList, status, number, isExist })
        if (res.code === 0) {
          ElMessage({
            type: 'success', message: `修改成功:${value}`,
          })
        }
        selectProductIdList.value = []
        refresh()
      })
    return
  }
  const res: res = await updateBatchProductApi({ productIdList, status, number, isExist })
  if (res.code == 0) {
    ElMessage({ type: 'success', message: '操作成功' })
    selectProductIdList.value = []
    refresh()
    return
  }


}
//--------------------------------------------------------------------------------添加商品--------------------------------------------------------------------------------------
const ShowPage = ref('productList')
//打开添加商品页面
const showAddProductPage = () => {
  // router.push('/addProduct')
  ShowPage.value = 'productDetails'
}
//选中商品id
const pid = ref()

//打开编辑商品页面
const showProductInfoPage = (id: number) => {
  pid.value = id
  // console.log('打开商品编辑了')
  // console.log(pid.value)
  ShowPage.value = 'productDetailsInfo'
}
//关闭添加商品页面
const exitAddProductPage = (newShowPage) => {
  ShowPage.value = newShowPage
  refresh()
}

//---------------------------------------------------------------------------------单独处理--------------------------------------------------------------------------------------------------
//单个删除商品
const popUpWinDel = async (prop: string, id: number) => {
  ElMessageBox.confirm(
    '您确定删除该商品吗?',
    prop,
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      draggable: true,
      type: 'warning',
      icon: markRaw(Delete),
    }
  ).then(async () => {
    const res: res = await delProductApi(id)
    if (res.code === 0) {
      ElMessage({ type: 'success', message: '删除成功' })
    }
    refresh()
  })
}
//单个永久删除
const popdelProduct = (pid: number) => {
  ElMessageBox.confirm(
    '您确定永久删除该商品吗?该操作不可恢复',
    '永久删除',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      draggable: true,
      type: 'warning',
      icon: markRaw(Delete),
    }
  ).then(async () => {
    // const res:res = await delProductApi(id)
    // if (res.code === 0) {
    ElMessage({ type: 'error', message: '权限不足' })
    // }
    // refresh()
  })
}
//单个恢复
const recoverProduct = async (id: string) => {
  const res: res = await recoverProductApi(id)
  if (res.code === 0) {
    ElMessage({ type: 'success', message: '恢复成功' })
  }
  refresh()
}

//单个下架
const underProduct = (id: number) => {
  ElMessageBox.confirm(
    '您确定下架该商品吗?',
    '商品下架',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      draggable: true,
      type: 'warning',
      icon: markRaw(Bottom),
    }
  ).then(async () => {
    const res: res = await updateProductApi({ productId: id, status: 0, sort: null, name: null, price: null, number: null })
    if (res.code === 0) {
      ElMessage({ type: 'success', message: '下架成功' })
    }
    refresh()
  })

}

//单个上架
const upProduct = (id: number) => {
  ElMessageBox.confirm(
    '您确定重新上架该商品吗?',
    '商品下架',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      draggable: true,
      type: 'warning',
      icon: markRaw(Top),
    }
  ).then(async () => {
    const res: res = await updateProductApi({ productId: id, status: 1, sort: null, name: null, price: null, number: null })
    if (res.code === 0) {
      ElMessage({ type: 'success', message: '上架成功' })
    }
    refresh()
  })

}

//单个修改price
const popUpWinPrice = (prop: string, oldValue: string, id: number) => {
  ElMessageBox.prompt('', prop, {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    draggable: true,
    inputValue: oldValue,
    inputPattern:
      /^(0|[1-9]\d*)(\.\d{1,2})?$/,
    inputErrorMessage: '请输入正确价格',
  })
    .then(async ({ value }) => {
      const res: res = await updateProductApi({ productId: id, status: null, sort: null, name: null, price: value, number: null })
      if (res.code === 0) {
        ElMessage({
          type: 'success', message: `修改成功:${value}`,
        })
      }
      refresh()
    })

}
//单个修改-name
const popUpWinName = (prop: string, oldValue: string, id: number) => {
  ElMessageBox.prompt('', prop, {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    draggable: true,
    inputValue: oldValue,
  })
    .then(async ({ value }) => {
      const res: res = await updateProductApi({ productId: id, status: null, sort: null, name: value, price: null, number: null })
      if (res.code === 0) {
        ElMessage({
          type: 'success', message: `修改成功:${value}`,
        })
      }
      refresh()
    })

}
//单个修改-sort,number校验
const popUpWinSort = (prop: string, oldValue: string, id: number) => {
  ElMessageBox.prompt('', prop, {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    draggable: true,
    inputValue: oldValue,
    inputPattern:
      /^(0|[1-9]\d*)$/,
    inputErrorMessage: '请输入数字',
  })
    .then(async ({ value }) => {
      const res: res = await updateProductApi({ productId: id, status: null, sort: value, name: null, price: null, number: null })
      if (res.code === 0) {
        ElMessage({
          type: 'success', message: `修改成功:${value}`,
        })
      }
      refresh()
    })
}
//单个修改库存
const popUpWinNumber = (prop: string, oldValue: string, id: number) => {
  ElMessageBox.prompt('', prop, {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    draggable: true,
    inputValue: oldValue,
    inputPattern:
      /^(0|[1-9]\d*)$/,
    inputErrorMessage: '请输入数字',
  })
    .then(async ({ value }) => {
      const res: res = await updateProductApi({ productId: id, status: null, sort: null, name: null, price: null, number: value })
      if (res.code === 0) {
        ElMessage({
          type: 'success', message: `修改成功:${value}`,
        })
      }
      refresh()
    })
}

//--------------------------------------------------------------------------------多规格修改-----------------------------------------------------------------------------

const productSpecs = ref([])
const showSpecsPriceManage = ref(false)
const showSpecsNumberManage = ref(false)
const oldSpecs = ref([])

const popUpWinNumbers = async (productId: String, type: String) => {

  if (type == 'price') {
    showSpecsPriceManage.value = true
  }
  if (type == 'number') {
    showSpecsNumberManage.value = true
  }
  const res = await specificationByProductIdListApi(productId)
  productSpecs.value = res.data
  oldSpecs.value = JSON.parse(JSON.stringify(productSpecs.value))
}



//提交修改
const commitUpdatePrice = async () => {
  //校验修改项
  for (let i = 0; i < productSpecs.value.length; i++) {
    if (productSpecs.value[i].price != oldSpecs.value[i].price) {
      const res: res = await updateSpecificationByProductIdListApi(productSpecs.value[i].id, productSpecs.value[i].price, null,productSpecs.value[i].productId)
      if (res.code == 0) {
        ElMessage({ type: 'success', message: res.message })
      }
    }
  }
}
const commitUpdateNumber = async () => {
  //校验修改项
  for (let i = 0; i < productSpecs.value.length; i++) {
    if (productSpecs.value[i].number != oldSpecs.value[i].number) {
      const res: res = await updateSpecificationByProductIdListApi(productSpecs.value[i].id, null, productSpecs.value[i].number,productSpecs.value[i].productId)
      if (res.code == 0) {
        ElMessage({ type: 'success', message: res.message })
      }
    }
  }
}


const gk = (id: number) => {
  ElMessageBox.confirm(
    '您确定该商品库存清零吗?',
    '商品沽清',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      draggable: true,
      type: 'warning',

    }
  ).then(async () => {
    const res: res = await updateProductApi({ productId: id, status: null, sort: null, name: null, price: null, number: 0 })
    if (res.code === 0) {
      ElMessage({ type: 'success', message: '沽清成功' })
    }
    refresh()
  })

}
const zm = (id: number) => {
  ElMessageBox.confirm(
    '您确定商品库存拉满吗?',
    '商品置满',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      draggable: true,
      type: 'warning',

    }
  ).then(async () => {
    const res: res = await updateProductApi({ productId: id, status: null, sort: null, name: null, price: null, number: 999 })
    if (res.code === 0) {
      ElMessage({ type: 'success', message: '置满成功' })
    }
    refresh()
  })
}







const refresh = async () => {
  getProductListByCondition(activeName.value)
  getProductListCount()
}
onMounted(() => {
  //获取默认列表
  getProductListByCondition(activeName.value)
  //获取所有分类统计数量
  getProductListCount()
  getClassNames()

})

</script>

<template>
  <div v-if="ShowPage == 'productList'">
    <Header title="商品列表"></Header>
    <div style="height: 50px;">
      <el-tabs v-model="activeName" class="el-tabs__content" @tab-click="fenlei" type="card">
        <el-tab-pane :label="'全部(' + productCount.all + ')'" name="all"></el-tab-pane>
        <el-tab-pane :label="'已上架(' + productCount.up + ')'" name="up"></el-tab-pane>
        <el-tab-pane :label="'库存不足(' + productCount.issuffice + ')'" name="issuffice"></el-tab-pane>
        <el-tab-pane :label="'已售罄(' + productCount.sellout + ')'" name="sellout"></el-tab-pane>
        <el-tab-pane :label="'已下架(' + productCount.under + ')'" name="under"></el-tab-pane>
        <el-tab-pane :label="'回收站(' + productCount.delete + ')'" name="delete"></el-tab-pane>
      </el-tabs>
    </div>

    <div style="height: auto;min-height: 50px;display: flex; ">

      <el-tooltip content="批量上架" placement="top">
        <ElButton type="warning" plain @click="batchHandle(selectProductIdList, 1, null, null)">上架</ElButton>
      </el-tooltip>
      <el-tooltip content="批量下架" placement="top">
        <ElButton type="warning" plain @click="batchHandle(selectProductIdList, 0, null, null)">下架</ElButton>
      </el-tooltip>
      <el-tooltip content="批量修改库存" placement="top">
        <ElButton type="warning" plain @click="batchHandle(selectProductIdList, null, -1, null)">修改库存</ElButton>
      </el-tooltip>
      <el-tooltip content="批量沽清" placement="top">
        <ElButton type="warning" plain @click="batchHandle(selectProductIdList, null, 0, null)">沽清</ElButton>
      </el-tooltip>
      <el-tooltip content="批量置满" placement="top">
        <ElButton type="warning" plain @click="batchHandle(selectProductIdList, null, 999, null)">置满</ElButton>
      </el-tooltip>
      <el-tooltip content="批量删除" placement="top">
        <ElButton type="warning" plain @click="batchHandle(selectProductIdList, null, null, 0)">删除</ElButton>
      </el-tooltip>
      <div style="position:relative;left: 40%;">
        <IButton @click="showAddProductPage" title="添加商品"></IButton>
        <IButton type="in" title="导入商品"></IButton>
        <IButton type="out" title="导出商品"></IButton>
      </div>
    </div>

    <div v-if="activeName == 'all'" style=" height: 50px">
      <el-row :gutter="25">
        <el-col :span="50">
          <el-input @input="debouncedInputHandle" @clear="debouncedInputHandle" v-model="input_sousuo_name" size=""
            placeholder="请输入商品名称" class="w-50 m-2" :suffix-icon="Search" />
        </el-col>
        <el-col :span="50">
          <el-select v-model="input_sousuo_class" @change="selectHandle" placeholder="请选择商品分类">
            <el-option style="color: blue;" label='全部分类' value='全部分类' />
            <el-option v-for="item in classify1ListName" :label=item.class1Name :value=item.class1Name />
          </el-select>
        </el-col>
      </el-row>
    </div>
    <div v-if="!loadingItemList" class="itemList">
      <el-table :data="limitItemList" stripe empty-text="没有数据" @selection-change="handleSelectionChange" :border=false
      :header-cell-style="{background:'rgb(243, 243, 243)',color:'#606266'}"
        :scrollbar-always-on=false style="width: 94%;height: 100%;">
        <el-table-column type="selection" width="30px">
        </el-table-column>
        <el-table-column type="expand">
          <template #default="props">
            <div m="4">
              <p m="t-0 b-2">商品名: {{ props.row.name }}</p>
              <p m="t-0 b-2">商品价格: {{ props.row.price }}</p>
              <p m="t-0 b-2">商品库存: {{ props.row.number }}</p>
              <p m="t-0 b-2">商品分类: {{ props.row.classify1Name }}</p>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="排序" prop="sort" width="80px">
          <template #default="{ row }">
            <div v-if="row.isExist !== 0">
              {{ row.sort }}
              <el-link :underline="false" @click="popUpWinSort('排序', row.sort, row.productId)"><el-icon :size="14"
                  color="#409eff">
                  <Edit />
                </el-icon></el-link>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="商品ID" prop="productId" width="100px"></el-table-column>
        <el-table-column label="名称" prop="name" width="280px">
          <template #default="{ row }">
            <div class="item-container">
              <img class="img_p" :src="row.image + '?timestamp=' + Date.now()">
              <div class="content">
                <div class="pname_label_i">
                  <label class="name_pname">{{ row.name }}
                    <el-link v-if="row.isExist !== 0" :underline="false"
                      @click="popUpWinName('商品名称', row.name, row.productId)"><el-icon :size="14" color="#409eff">
                        <Edit />
                      </el-icon></el-link>
                  </label>
                </div>
                <label class="sales">销量：{{ row.sales }}</label>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="分类" prop="classify1Name" ></el-table-column>
        <el-table-column label="价格" prop="price" width="150px">
          <template #default="{ row }">
            <div v-if="row.isExist !== 0">
              <div v-show="row.multiSpec == '1'">
                <label style="color: rgb(245, 89, 89);"><label>￥{{ row.minPrice }}~{{row.maxPrice}}</label></label>
                <el-button size="small" @click="popUpWinNumbers(row.productId, 'price')" style="margin-left: 5%;"><label
                    style="color:dodgerblue ;">管理</label></el-button>
              </div>


              <div v-show="row.multiSpec != '1'">
                <label style="color: rgb(245, 89, 89);"><label >￥</label>{{ row.price.toFixed(2)}}</label>

                <el-link :underline="false" @click="popUpWinPrice('价格', row.price, row.productId)"><el-icon :size="14"
                    color="#409eff">
                    <Edit />
                  </el-icon></el-link>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="库存" prop="number" width="150px">
          <template #default="{ row }">
            <div v-if="row.isExist !== 0">

              <div v-show="row.multiSpec != '1'">
                <label>{{ row.number }}</label>
                <el-link :underline="false" @click="popUpWinNumber('库存', row.number, row.productId)">
                  <el-icon :size="14" color="#409eff">
                    <Edit />
                  </el-icon>
                </el-link>
                <el-link @click="gk(row.productId)" :underline="false"
                  style="margin-left: 5%;color:dodgerblue;">沽清</el-link>

                <el-link @click="zm(row.productId)" :underline="false"
                  style="margin-left: 5%;color:dodgerblue;">置满</el-link>
              </div>

              <div v-show="row.multiSpec == '1'">
                <label>多规格</label>
                <el-button size="small" @click="popUpWinNumbers(row.productId, 'number')" style="margin-left: 5%;"><label
                    style="color:dodgerblue ;">管理</label></el-button>
              </div>

            </div>
          </template>
        </el-table-column>
        <el-table-column class="caozuo" label="操作" >
          <template #default="{ row }">
            <div class="button-container" v-if="row.isExist == '1'">
              <el-tooltip content="下架" placement="top">
                <el-button @click="underProduct(row.productId)" v-if="row.status == '1'" 
                  color="silver" icon="Bottom" circle></el-button>
              </el-tooltip>

              <el-tooltip content="上架" placement="top">
                <el-button @click="upProduct(row.productId)" v-if="row.status == '0'" type="success"
                  icon="Top" circle></el-button>
              </el-tooltip>

              <el-tooltip content="编辑" placement="top">
                <OButton @click="showProductInfoPage(row.productId)"  />
              </el-tooltip>
              <el-tooltip content="删除" placement="top">
                <OButton @click="popUpWinDel('商品删除', row.productId)"  type="delete"/>
              </el-tooltip>

              <el-tooltip content="会员价" placement="top">
                <el-button  icon="Ticket" circle type="danger"></el-button>
              </el-tooltip>

              <el-tooltip content="更多" placement="top">
                <el-button @click="" icon="MoreFilled" circle type="danger"
                  color="gold"></el-button>
              </el-tooltip>
            </div>

            <div v-else-if="row.isExist == '0'">

              <el-tooltip content="恢复" placement="top">
                <el-button @click="recoverProduct(row.productId)" type="success" icon="Refresh"
                  circle></el-button>
              </el-tooltip>

              <el-tooltip content="永久删除" placement="top">
                <el-button @click="popdelProduct(row.id)" icon="delete" circle
                  type="danger"></el-button>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div>
      <el-dialog :modal="true" title="多规格价格管理" v-model="showSpecsPriceManage"
        style="position: absolute;left: 40%;top:20%;width:500px">
        <el-form ref="form" label-width="100px">
          <el-form-item v-for="spec in productSpecs" :label="spec.name">
            <el-input-number v-model="spec.price" style="width: 200px" :precision="2" :step="1" :min="0" />
          </el-form-item>
        </el-form>
        <span style="position: relative;top: 10px;left: 70%;">
          <el-button @click="showSpecsPriceManage = false">取消</el-button>
          <el-button type="primary" @click="commitUpdatePrice(); showSpecsPriceManage = false">确定</el-button>
        </span>
      </el-dialog>
    </div>

    <div>
      <el-dialog :modal="true" title="多规格库存管理" v-model="showSpecsNumberManage"
        style="position: absolute;left: 40%;top:20%;width:500px">
        <el-form ref="form" label-width="100px">
          <el-form-item v-for="spec in productSpecs" :label="spec.name">
            <el-input-number v-model="spec.number" style="width: 200px" :precision="0" :step="1" :min="0" />
            <el-link @click="spec.number = 0" :underline="false" style="margin-left: 5%;color:dodgerblue;">沽清</el-link>
            <el-link @click="spec.number = 999" :underline="false" style="margin-left: 5%;color:dodgerblue;">置满</el-link>
          </el-form-item>
        </el-form>
        <span style="position: relative;top: 10px;left: 70%;">
          <el-button @click="showSpecsNumberManage = false">取消</el-button>
          <el-button type="primary" @click="commitUpdateNumber(); showSpecsNumberManage = false">确定</el-button>
        </span>
      </el-dialog>
    </div>

    <div v-if="loadingItemList" style="display: flex;justify-content: center;">
      <img src="@/assets/images/loading.gif" />
    </div>
    <div>
      <Limit v-if="activeName === 'all'" :itemList="itemList" @updateItemList="getLimitItemList" />
      <Limit v-if="activeName === 'up'" :itemList="itemList" @updateItemList="getLimitItemList" />
      <Limit v-if="activeName === 'under'" :itemList="itemList" @updateItemList="getLimitItemList" />
      <Limit v-if="activeName === 'issuffice'" :itemList="itemList" @updateItemList="getLimitItemList" />
      <Limit v-if="activeName === 'sellout'" :itemList="itemList" @updateItemList="getLimitItemList" />
      <Limit v-if="activeName === 'delete'" :itemList="itemList" @updateItemList="getLimitItemList" />
    </div>
  </div>
  <!-- 商品详情页面 -->
  <div v-if="ShowPage == 'productDetails'">
    <ProductDetails :isupdate="0" :ShowPage="ShowPage" @exitAddProductPage="exitAddProductPage"></ProductDetails>
  </div>
  <!-- 商品编辑 -->
  <div v-if="ShowPage == 'productDetailsInfo'">
    <ProductDetails :isupdate="1" :pid="pid" :ShowPage="ShowPage" @exitAddProductPage="exitAddProductPage">
    </ProductDetails>
  </div>
</template>
 

<style scoped lang="scss">

.itemList{
 position: relative;
}
/* .liti {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2),
              0 4px 8px rgba(0, 0, 0, 0.1);
} */
::v-deep .el-tabs__item {
  opacity: 0.5;
}



.el-table__body-wrapper {
  -ms-overflow-style: none;  
  scrollbar-width: none; 
}

::v-deep .el-tabs__item.is-active {
  color: $seleceted;
  opacity: 1;
}

::v-deep .el-tabs__item:hover {
  color: $seleceted;
  cursor: pointer;
  opacity: 1;
}

.el-button .custom-loading .circular {
  margin-right: 6px;
  width: 18px;
  height: 18px;
  animation: loading-rotate 2s linear infinite;
}

.el-button .custom-loading .circular .path {
  animation: loading-dash 1.5s ease-in-out infinite;
  stroke-dasharray: 90, 150;
  stroke-dashoffset: 0;
  stroke-width: 2;
  stroke: var(--el-button-text-color);
  stroke-linecap: round;
}

.demo-tabs>.el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

/*table标题 */
::v-deep .el-table th>.cell {
  color: black;
  height: 35px;
  // font-size: 18px;
  display: flex;
  align-items: center;
}


.el-table__fixed,
.el-table__fixed-right {
  height: 100% !important;
}

.img_p {
  width: 50px;
  height: 50px;
  margin-right: 10px;
  /* 图片与内容之间的间距 */
}

/*table商品名称列div */
.name_pname {
  width: 200px;
  white-space:nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* /商品名展示label/ */

/* .caozuo-button {
  width: 30px;
  height: 15px;
  font-size: 10px;
} */

/*table操作列按钮 */

.button-container {
  width: 300px;
  display: flex;
  /* justify-content: space-between; /
/ gap: 1px;*/
}

.item-container {
  display: flex;
  align-items: center;
  /* 垂直居中对齐 */
}

/**操作列按钮盒子div */

.content {
  display: flex;
  flex-direction: column;
  /* 竖直排列 /
margin-right: 10px;
/ 内容与编辑图标之间的间距 */
}

/** 商品名称+销量盒子*/
.pname_label_i {
  display: flex;

}

.item-table {}
</style>